<style lang="less">
.auth-drawer {
	.arco-drawer-body {
		padding: 24px;

		.auth-drawer__header {
			height: 105px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid #eaeaea;
			margin-bottom: 8px;

			.user-info {
				padding-left: 72px;
				display: flex;
				flex-direction: column;
				justify-content: center;
				position: relative;

				.user-avatar {
					width: 56px;
					height: 56px;
					border-radius: 50%;
					overflow: hidden;
					position: absolute;
					top: 50%;
					left: 0;
					transform: translate(0, -50%);

					img {
						width: 100%;
					}
				}

				.user-name {
					color: #262626;
					font-size: 16px;
					margin-bottom: 8px;
					font-weight: 600;
				}

				.user-ip {
					color: #808080;
					font-size: 14px;
				}
			}

			.arco-btn {
				padding: 0 26px;
			}
		}

		.auth-drawer__user-info {
			display: flex;
			align-items: center;
			margin-bottom: 22px;

			.info-item {
				font-size: 14px;

				&+.info-item {
					margin-left: 66px;
				}

				.info-title {
					margin-right: 32px;
					color: #808080;
				}

				.info-value {
					color: #262626;
				}
			}
		}

		.auth-drawer__form {
			.form__select {
				width: 288px;

				&--sub {
					width: 200px;
				}
			}

			.form__input,
			.form__date-picker {
				width: 288px;
			}

			.form__auth-type {
				position: relative;

				.arco-form-item-message {
					position: absolute;
					bottom: -20px;
				}

				.section__auto-type {
					margin-right: 8px;

					.arco-form-item-wrapper-col {
						flex: 0 0 auto;
					}
				}

				.arco-form-item-wrapper-col {
					.arco-form-item-label-col {
						display: none;
					}

					.arco-form-item {
						margin-bottom: 0;
					}
				}
			}

			.arco-form-item-label-col {
				flex-basis: 72px;
			}

			.type_warn_tips {
				width: 496px;
				height: 40px;
				display: flex;
				align-items: center;
				background-color: #FFECE8;
				padding: 10px 11px;
				box-sizing: border-box;
				.arco-icon {
					line-height: 1;
					font-size: 17px;
					color: #FF3C3C;
				}
				.warn_tips {
					font-size: 14px;
					color: #101010;
					margin-left: 5px;
					line-height: 20px;
					margin-top: 1px;
				}
			}
		}

		.auth-drawer-upload {
			display: flex;
			align-items: center;

			.arco-upload-list-item {
				margin-top: 0;
				margin-left: 16px;

				.arco-upload-progress {
					display: none;
				}
			}
		}
	}
}
</style>

<template>
	<a-drawer
		class="auth-drawer"
		:width="720"
		:visible="visible"
		@cancel="handleCancel"
		@ok="addAuth"
		@close="handleClose"
		unmountOnClose
	>
		<template #title> 授权 </template>
		<!-- <div class="auth-drawer__header">
		<div class="user-info">
			<div class="user-avatar">
			<img src="http://www.mikeahhui.com/img/avator.jpg" alt="" />
			</div>
			<p class="user-name">张三</p>
			<p class="user-ip">IP归属地：北京</p>
		</div>
		</div> -->
		<div class="auth-drawer__user-info">
			<p class="info-item">
				<span class="info-title">授权账号</span>
				<span class="info-value">{{ authData.mobPhone }}</span>
			</p>
			<p class="info-item">
				<span class="info-title">用户名</span>
				<span class="info-value">{{ authData.username }}</span>
			</p>
			<p class="info-item">
				<span class="info-title">用户ID</span>
				<span class="info-value">{{ authData.id }}</span>
			</p>
		</div>
		<a-form class="auth-drawer__form" :model="form" label-align="left" ref="formRef" :rules="formRules">
			<a-form-item label="授权类型" class="form__auth-type">
				<a-form-item class="section__auto-type" field="authType" :validate-trigger="['change']">
					<a-select class="form__select" v-model="form.authType" placeholder="请选择" @change="changePriceList">
						<a-option v-for="it in authTypeList" :key="it.value" :value="it.value">{{ it.label }}</a-option>
					</a-select>
				</a-form-item>
				<a-form-item class="section__auto-type" field="licenseType" :validate-trigger="['change']">
					<a-select v-model="authTypeValue" class="form__select form__select--sub" placeholder="请选择" @change="onLicenseTypeChange">
						<a-option v-for="(it, index) in authTypeSubList" :key="index" :value="index">{{ it.description }}</a-option>
					</a-select>
				</a-form-item>
			</a-form-item>
			<a-form-item v-if="hasPower && (form.licenseType == 20)" style="margin-top: -10px;">
				<div class="type_warn_tips">
					<icon-close-circle-fill />
					<span class="warn_tips">该账号已开通过测试权限，无权再次开通</span>
				</div>
			</a-form-item>
			<a-form-item
				v-if="form.authType === 1 && authTypeSubList[authTypeValue] && [4].includes(authTypeSubList[authTypeValue].licenseType)"
				label="到期时间"
				:validate-trigger="['change']"
				field="dueDate"
			>
				<a-date-picker
					v-model="form.dueDate"
					value-format="timestamp"
					show-time
					:show-now-btn="false"
					:disabledDate="disabledDate"
					format="YYYY-MM-DD HH:mm:ss"
				/>
			</a-form-item>
			<a-form-item label="付款金额" :validate-trigger="['blur']" field="amount">
				<a-input class="form__input" v-model="form.amount" placeholder="请输入" />
			</a-form-item>
			<a-form-item label="付款方式" :validate-trigger="['change']" field="paymentMode">
				<a-select class="form__select" v-model="form.paymentMode" placeholder="请选择" @change="getPayCompany">
					<a-option v-for="it in payTypeList" :key="it.value" :value="it.value">{{ it.label }}</a-option>
				</a-select>
			</a-form-item>
			<a-form-item label="收款公司" :validate-trigger="['change']" field="payModeCompany">
				<a-select class="form__select" v-model="form.payModeCompany" placeholder="请选择">
					<a-option v-for="it in payCompanyList" :key="it.id" :value="it.id">{{
						it.name
					}}</a-option>
				</a-select>
			</a-form-item>
			<a-form-item label="回款金额">
				<a-input class="form__input" v-model="form.account" placeholder="请输入" />
			</a-form-item>
			<a-form-item label="回款日期">
				<a-date-picker v-model="form.payDate" value-format="X" class="form__date-picker" />
			</a-form-item>
			<a-form-item label="回款凭证">
				<a-upload class="auth-drawer-upload" action="" accept=".png,,jpg,.jpeg" :auto-upload="false"
					:show-retry-button="false" :image-preview="true" :file-list="fileLists" :on-before-remove="removeImg"
					@change="uploadImg">
					<template #upload-button>
						<a-button>
							<template #icon>
								<icon-upload />
							</template>
							<template #default>本地上传</template>
						</a-button>
					</template>
				</a-upload>
			</a-form-item>
			<a-form-item label="备注" :validate-trigger="['blur']" field="remark">
				<a-textarea placeholder="请输入" v-model="form.remark" allow-clear />
			</a-form-item>
		</a-form>
	</a-drawer>
</template>

<script setup lang="ts">
import { ref, reactive, withDefaults, Ref } from "vue";
import { Message } from "@arco-design/web-vue";
import { order, upload } from "@/api";
import { number } from "echarts";

interface PropsType {
	visible: boolean;
	authData: any;
}
interface EmitType {
	(e: "changeAuthDrawerVisible", v: boolean): void;
	(e: "refreshList"): void;
}

const props = withDefaults(defineProps<PropsType>(), {
	visible: false,
	authData: {
		id: "",
		username: "",
		mobPhone: "",
		dueDate: "",
	},
});

const disabledDate = (current: Date) => {
	const date = props.authData.dueDate && new Date(props.authData.dueDate).getTime() > new Date().getTime() ? props.authData.dueDate : +new Date();
	return +new Date(date) > +new Date(current);
}

const emit = defineEmits<EmitType>();

const handleCancel = () => {
	emit("changeAuthDrawerVisible", false);
};
const handleClose = () => {
	form.value = {
		authType: "",
		licenseType: "",
		amount: "",
		dueDate: "",
		paymentMode: "",
		payModeCompany: "",
		account: "",
		payDate: "",
		evidence: "",
		remark: "",
	};
	evidence.value = "";
	fileLists.value = [];
	authTypeSubList.value = [];
	authTypeValue.value = '';
	hasPower.value = false;
};

const form: any = ref({
	authType: "",
	licenseType: "",
	amount: "",
	dueDate: "",
	paymentMode: "",
	payModeCompany: "",
	account: "",
	payDate: "",
	evidence: "",
	remark: "",
	number: 1,
});

const authTypeList = [
	{
		label: "会员服务",
		value: 1,
		params: [1],
	},
	{
		label: "参会人数",
		value: 2,
		params: [2],
	},
	{
		label: "短信",
		value: 3,
		params: [3],
	},
	{
		label: "邮件",
		value: 4,
		params: [4],
	},
	{
		label: "媒体库",
		value: 5,
		params: [5],
	},
];
const authTypeSubList: any = ref();
const authTypeValue: Ref<number | string> = ref('')
const hasPower = ref(false);

const getPriceList = async () => {
	const body = [form.value.authType];
	const { ok, data } = await order.getPriceList(body);
	if (!ok) return;
	if (form.value.authType) {
		if (form.value.authType == 2) {
			const { capacity, description, licenseType, price, serviceType } = data.data[form.value.authType][0]
			authTypeSubList.value = [5, 10, 15, 20].map(number => {
				return {
					capacity: capacity * number,
					description: description + '-' + capacity * number + '人',
					licenseType,
					price: price * number,
					number,
				}
			})
			return
		} else {
			authTypeSubList.value = data.data[form.value.authType].filter((e: { capacity: number, isDisplay: boolean, number: number, licenseType: number }) => {
				e.number = 1
				return (e.capacity || [4].includes(e.licenseType)) && e.isDisplay
			});
			return
		}
	}
};
const payTypeList = [
	{
		label: "公司微信",
		value: 1,
	},
	{
		label: "公司支付宝",
		value: 2,
	},
	{
		label: "公司对公账户",
		value: 3,
	},
	{
		label: "其他",
		value: 4,
	},
];
const changePriceList = async () => {
	authTypeSubList.value = [];
	authTypeValue.value = ''
	form.value.licenseType = "";
	form.value.number = 1
	form.value.amount = ''
	await getPriceList();
	//   authTypeValue.value = 0
};
const onLicenseTypeChange = (index: any) => {
	const target = authTypeSubList.value[index]
	if(target.licenseType == 20) {
		getHasPower();
	}
	form.value.licenseType = target.licenseType
	form.value.number = target.number
	form.value.amount = target.price / 100
}

// 获取是否七天授权过
const getHasPower = async () => {
	const userId = props.authData.id;
	const { data, ok } = await order.getHasPower(userId);
	if(!ok) {
		return;
	}

	if(data.data) {
		hasPower.value = true;
	}
}

const payCompanyList: any = ref([]);
const getPayCompany = async () => {
	payCompanyList.value = [];
	form.value.payModeCompany = "";
	if (!form.value.paymentMode) return;
	const { ok, data } = await order.getPayCompany(form.value.paymentMode);
	if (!ok) return;
	payCompanyList.value = data.data;
};

const evidence = ref<string>("");
const fileLists: any = ref([]);
const uploadImg = async (fileList: any, fileItem: any) => {
	if (evidence.value) {
		fileLists.value = [fileItem];
	}
	let formData = new FormData();
	formData.append("file", fileItem.file);
	const { ok, data } = await upload.uploadImg(fileItem.file);
	if (!ok) {
		return;
	}
	Message.success("上传成功");
	evidence.value = data.data.data;
};
const removeImg: any = (fileItem: any) => {
	fileLists.value = [];
};

const addAuth = async () => {
	if(hasPower.value && (form.value.licenseType == 20)) {
		return;
	}
	formRef.value.validate(async (error: object | undefined) => {
		if (!error) {
			let body: any = {
				userId: props.authData.id,
				licenseType: +form.value.licenseType,
				amount: Math.ceil(form.value.amount * 100),
				paymentMode: +form.value.paymentMode,
				payModeCompany: +form.value.payModeCompany,
				remark: form.value.remark,
				evidence: evidence.value,
				account: +form.value.account * 100,
				payDate: +form.value.payDate,
				number: form.value.number,
			};
			if (form.value.authType === 1 && authTypeSubList.value[authTypeValue.value] && [4].includes(authTypeSubList.value[authTypeValue.value].licenseType)) {
				body.dueDate = form.value.dueDate;
			}
			const { ok, data } = await order.addAuth(body);
			if (!ok) return;
			Message.success("添加成功");
			emit("changeAuthDrawerVisible", false);
			emit("refreshList");
		}
	});
};

const authTypeValid = (v: string, cb: Function) => {
	if (!v) {
		return cb("请选择授权类型");
	} else {
		cb();
	}
};
const amountValid = (v: string, cb: Function) => {
	const regex = /^\d+(\.\d{1,2})?$/;
	if (!regex.test(v)) {
		return cb("请输入付款金额");
	} else {
		cb();
	}
};
const payModeCompanyValid = (v: string, cb: Function) => {
	if (!v) {
		return cb("请选择收款公司");
	} else {
		cb();
	}
};
const paymentModeValid = (v: string, cb: Function) => {
	if (!v) {
		return cb("请选择付款方式");
	} else {
		cb();
	}
};
const licenseTypeValid = (v: string, cb: Function) => {
	if (!v) {
		return cb("请选择类型选项");
	} else {
		cb();
	}
};
const remarkValid = (v: string, cb: Function) => {
	if (!v) {
		return cb("请输入备注");
	} else {
		cb();
	}
};
const dueDateValid = (v: number, cb: Function) => {
	if (form.value.authType === 1 && authTypeSubList.value[authTypeValue.value] && [4].includes(authTypeSubList.value[authTypeValue.value].licenseType)) {
		if (!v) {
			return cb('请选择到期时间');
		} else {
			cb();
		}
	} else {
		cb();
	}
}
const formRef = ref();
const formRules = {
	authType: [{ validator: authTypeValid }],
	amount: [{ validator: amountValid }],
	payModeCompany: [{ validator: payModeCompanyValid }],
	paymentMode: [{ validator: paymentModeValid }],
	licenseType: [{ validator: licenseTypeValid }],
	remark: [{ validator: remarkValid }],
	dueDate: [{ validator: dueDateValid }],
};
// const form: any = ref({
//   authType: "",
//   licenseType: "",
//   amount: "",
//   paymentMode: "",
//   paymentModeCompany: "",
//   account: "",
//   payDate: "",
//   evidence: "",
//   remark: "",
// });
</script>
